<template>
	<view class="order_deta">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" title="订单详情" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">订单详情</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="status_view">
				<image src="@/static/images/7.png"></image>
				<view class="text">购买成功</view>
				<view class="desc">{{data_info.product_name}}已转入您的个人中心,请查看</view>
			</view>
			<view class="info_view">
				<image :src="data_info.product_cover" class="cover"></image>
				<view class="info_deta">
					<view class="name">【{{data_info.product_name}}】</view>
				</view>
			</view>
			<view class="cell_view">
				<view class="head">订单详情</view>
				<view class="cell_item">
					<view class="key">订单金额:</view>
					<view class="value">${{data_info.price}}</view>
				</view>
				<view class="cell_item">
					<view class="key">订单编号:</view>
					<view class="value">{{data_info.order_no}}</view>
				</view>
			</view>
			<view class="btn_view">
				<view class="btn" @click="router('/pages/tabbar/my')">个人中心</view>
				<view class="btn" @click="router('/pages/tabbar/home')">继续购买</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		orderInfo
	} from "@/request/api";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";

	const data_info = ref({});
	onLoad(async ({
		id
	}) => {
		let {
			info
		} = await orderInfo({
			id
		});
		data_info.value = info;
	});
	const router = (url) => {
		uni.switchTab({
			url
		})
	};
</script>

<style scoped lang="scss">
	@import '@/pages/common/style/common.scss';
</style>